<template>
<el-card ref="card">
  <h3>资源详情</h3>
  <el-divider />
  <div class="card">
    <div class="card-img">
      <el-image :src="web.icon" fit="contain"/>
    </div>
    <div class="card-info">
      <p class="text-title">{{ web.name }} </p>
      <p class="text-body">{{ web.web_description }}</p>
    </div>
    <div class="card-tags">
      <el-tag type="success">{{web.tags}}</el-tag>
    </div>
  </div>
  <div class="card-main">
    <p>链接：<a target="_blank" :href="web.website">{{web.website}}</a>
      <copy-document v-if="!idCopyDone" @click="copyLink(web.website)" style="color:dodgerblue; width: 1em; height: 1em; margin-left: 8px" />
      <CircleCheckFilled v-else style="color:#0dab3f; width: 1em; height: 1em; margin-left: 8px" />
    </p>
    <p>详情：{{web.details}}</p>
    <p>时间：{{web.create_time}}</p>
    <p>推荐人：{{web.create_name}}</p>
  </div>
</el-card>
  <comment class="comment-card" :websiteId="websiteId"></comment>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import { getWebsiteDetailPage } from "../../api/website";
import {useRoute} from "vue-router";
import {CopyDocument, CircleCheckFilled} from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import Comment from "../../components/comment.vue";

let web=ref({
    id: 1,
    websiteId:1,
    name:'',
    icon:'',
    web_description:'',
    website:'',
    tags:'',
    details:'',
    create_time:'',
    create_name:''
})
const route=useRoute()
const websiteId=route.query.websiteId
// console.log(websiteId)


onMounted( ()=>{
  getWebsiteDetailPage(websiteId).then(res=>{
    // console.log(res.data);
    web.value=res.data[0]
    // console.log(web.value)

    // console.log('webid',websiteId.value)
    document.title=web.value.name
  })
})



const idCopyDone=ref(false)
const copyLink=(url:string)=> {
  // alert(url)
  navigator.clipboard.writeText(url).then(() => {
    ElMessage.success('复制成功')
  })
  idCopyDone.value=true
}
</script>

<style scoped>
a{
  color: dodgerblue;
  text-decoration: none;
}
.card,.card-info{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-img{
  background-color: rgba(121, 175, 220, 0.85);
  width: 60%;
  height: 30%;
}
.el-image{
  width: 60%;
  height: 30%;
  padding: 5%;
}
.text-body,.text-title{
  margin: 5px 0;
}
.comment-card{
  margin-top: 20px;
}
</style>